<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid red;"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById('canvas')
			var cxt = canvas.getContext('2d')
			canvas.width = 400
			canvas.height = 300
			cxt.strokeStyle = 'purple'
			cxt.moveTo(150, 0)
			cxt.lineTo(150, 300)
			cxt.stroke()
			
			cxt.font = '15px Arial'
			cxt.textAlign = "start"
			cxt.fillText("testAlign取值为start", 150, 30)
			cxt.textAlign = "left"
			cxt.fillText("testAlign取值为left", 150, 60)
			cxt.textAlign = "end"
			cxt.fillText("testAlign取值为end", 150, 90)
			cxt.textAlign = "right"
			cxt.fillText("testAlign取值为right", 150, 120)
			cxt.textAlign = "center"
			cxt.fillText("testAlign取值为center", 150, 150)
			
			//垂直对齐 textBaseline
			cxt.strokeStyle = 'blue'
			cxt.moveTo(0, 230)
			cxt.lineTo(400, 230)
			cxt.stroke()
			
			cxt.font = '20px Arial'
			cxt.textBaseline = "alphabetic"
			cxt.fillText("alphabetic", 70, 230)
			cxt.textBaseline = "top"
			cxt.fillText("top", 110, 230)
			cxt.textBaseline = "middle"
			cxt.fillText("middle", 160, 230)
			cxt.textBaseline = "bottom"
			cxt.fillText("bottom", 230, 230)
		</script>
	</body>
</html>
